<template>
  <div class="out-mode-div time-mode-switch">
    <div v-for="item in props.modes" :key="item.value" class="mode-item" :class="item.value == props.value ? 'active' : ''" @click="clickItem(item.value)">
      {{item.label}}
    </div>
  </div>
</template>


<script lang="ts" setup>

const emit = defineEmits(['update:value','change'])
export interface TimeMode{
  label:string,
  value:string
}
interface TimeModeSwitchType {
  modes?:TimeMode[],
  value?:string
}
const props = withDefaults(defineProps<TimeModeSwitchType>(),{
  modes:()=>[{label:'日',value:'day'},{label:'月',value:'month'}],
  value:''
});

const clickItem = (value:string)=>{
  if (value != props.value){
    emit('update:value', value);
    emit('change',value);
  }
}
</script>

<style scoped>



.time-mode-switch{
  --time-mode-switch-border-color: var(--m-blue);
  --time-mode-switch-border: 1px solid var(--time-mode-switch-border-color);
  --time-mode-switch-height: 1.6rem;
  --time-mode-switch-border-radius:5px;
  --time-mode-switch-active-bg-color:var(--m-blue);
  --time-mode-switch-active-color: white;
  display: flex;
  height: var(--time-mode-switch-height);
  align-items: center;
}
.mode-item{
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  font-size: 1rem;
  border: var(--time-mode-switch-border);
  border-right: none;
  cursor:pointer;

}
.mode-item:last-child{
  border-right: var(--time-mode-switch-border);
  border-radius: 0 var(--time-mode-switch-border-radius) var(--time-mode-switch-border-radius) 0;
}
.mode-item:first-child{
  border-radius: var(--time-mode-switch-border-radius) 0 0 var(--time-mode-switch-border-radius);
}
.mode-item.active{
  background-color: var(--time-mode-switch-active-bg-color);
  border-color: var(--time-mode-switch-active-bg-color);
  color: var(--time-mode-switch-active-color);
}
</style>
